<template>
    <div>
        <h3>用药管理</h3>
        医生姓名:
        <input type="text" v-model="info.Pyys">
        科室:
        <select v-model="info.sid">
                <option value="">请选择</option>
                <option  v-for="item in arr" :value="item.Id">{{ item.Ksname }}</option>
        </select>
        <input type="button" value="查询" @click="getlistYygl">
        <input type="button" value="批量完成" class="btn btn-info" @change="piliang(true)">
        <input type="button" value="导出" @click="daochu">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @change="checkall"></td>
                    <td>id</td>
                    <td>药品名称</td>
                    <td>科室</td>
                    <td>用药日期</td>
                    <td>病人姓名</td>
                    <td>病房号码</td>
                    <td>用药状态</td>
                    <td>配药医生</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Yid">
                    <td><input type="checkbox" v-model="ids"  :value="item.Yid"  @change="checkOne"></td>
                    <td>{{ item.Yid }}</td>
                    <td>{{ item.Yyname }}</td>
                    <td>{{ item.Ksname }}</td>
                    <td>{{ moment(item.Yydate).format('YYYY-MM-DD') }}</td>
                    <td>{{ item.Brname }}</td>
                    <td>{{ item.Bfhaom }}</td>
                    <td>
                        <span v-if="item.YyState==true" style="color: chartreuse;">已完成</span>
                        <span v-if="item.YyState==false" style="color: red;">未开始</span>
                    </td>
                    <td>{{ item.Pyys }}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-success" @click="xiugai(item.Yid)">
                        <input type="button" value="删除" class="btn btn-danger" @click="shanchu(item.Yid)">
                    </td>
                </tr>
            </tbody>
        </table>
                    <div>
                <span>共{{ data.lotalCount }}条</span>
                <span>共{{ data.lotalPage }}页</span>
                <span>共{{ info.PageIndex }}/{{ data.lotalPage }}页</span>

                <input type="button" value="首页" @click="fan(1)">
                <input type="button" value="上一页" @click="fan(info.PageIndex-1)">
                <input type="button" :value="item" v-for="item in data.lotalPage" @click="fan(item)">
                <input type="button" value="下一页" @click="fan(info.PageIndex+1)">
                <input type="button" value="尾页" @click="fan(data.lotalPage)">
                <select v-model="info.PageSize" @click="getlistYygl">
                    <option :value="item" v-for="item in res">每页{{ item }}条</option>
                </select>

            </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios'; 
import moment from 'moment';
import{useRoute,useRouter}from 'vue-router'
import { TypeFlags } from 'typescript';
const route=useRoute();
const router=useRouter();

let info:any=reactive({
    Pyys:'',
    sid:'',
    PageSize:2,
    PageIndex:1,
})
let data:any=reactive({
    list:[],
    lotalCount:0,
    lotalPage:0,
})
let res:any=reactive([2,3,4,6]);
//翻页
const fan=(num:any)=>{
    if(num<1){
        info.PageIndex=1;
        return
    }
    if(info.PageInde>num)
    {
        info.PageIndex=data.lotalPage;
        return
    }
    info.PageIndex=num;
    getlistYygl();
}

//全选
let checked:any=ref(false);
let ids:any=ref([]);

const checkall=()=>{
    // if(checked.value){
    //     ids.value=data.list.map((item:any)=>{
    //         return item.Yid
    //     })
    // }
    // else
    // {
    //     ids.value=[]
    // }
    if(checked.value){
        ids.value=data.list.map((item:any)=>{
            return item.Yid
        })
    }
    else
        {
            ids.value=[]
        }
}
const checkOne=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true
    }
    else
    {
        checked.value=false
    }

}


//显示
onMounted(()=>{
    getlistYygl();
})
const getlistYygl=()=>{
    axios({
        url:'/api/Yklx/GetListYygl',
        method:'get',
        params:info
    })
    .then((res)=>{
        Object.assign(data,res.data)
    })
}
//绑定
let arr:any=ref([])

onMounted(()=>{
    bingYygl();
})
const bingYygl=()=>{
    axios({
        url:'/api/Yklx/GetListKsgl',
        method:'get'
    })
    .then((res)=>{
        arr.value=res.data
    })
}
//修改
const xiugai=(Yid:any)=>{
    router.push({
        path:'/yyglUpdate',
        query:{
            id:Yid
        }
    })
}
//删除
const shanchu=(Yid:any)=>{
    var f=confirm("确认删除吗?");
    if((f)){
        axios({
        url:'/api/Yklx/Shanchu',
        method:'put',
        params:{
            id:Yid
        }
    })
    .then((res)=>{
        if(res.data>0){
            alert('删除成功');
            getlistYygl();
            return;
        }
        else
        {
            alert("删除失败");
            return;
        }
    })
    }
    
}
//批量修改状态
const piliang=(YyState:any)=>{
    if(ids.vlaue.length==0){
        alert("必选一项");
        return;
    }
    var f=confirm("确认修改吗?");
    if((f)){
        axios({
        url:'/api/Yklx/Piliang',
        method:'put',
        params:{
            ids:ids.value.toString(),
            YyState:YyState

        }
    })
    .then((res)=>{
        if(res.data>0){
            alert('修改成功');
            getlistYygl();
            return;
        }
        else
        {
            alert("修改失败");
            return;
        }
    })
    }

}
//导出
const daochu=()=>{
    location.href=`https://localhost:7209/api/Yklx/Exlse?PageSize=2&PageIndex=1`;
}
</script>

<style scoped>

</style>